<template>
  <div class="trainDetails2">
    <div class="container">
      <div class="train-detalis-left">
        <div class="train-detalis-left-top">
          <li
            class="el-icon-monitor"
            style="
              margin-top: 18px;
              margin-left: 20px;
              color: rgb(64, 158, 255);
              font-size: 28px;
              font-weight: bold;
            "
          >
            {{ trainInfo.courseTitle }}
          </li>
        </div>
        <div class="train-detalis-left-bottom">
          <div class="player-container">
            <video-player
              class="vjs-custom-skin"
              :options="playerOptions"
            ></video-player>
          </div>
        </div>
      </div>
      <!-- 培训详情页2 右侧课程栏 -->
      <div class="train-detalis-right">
        <div class="train-detalis-right-top">
          <div>课程信息</div>
        </div>
        <div class="train-detalis-right-bottom">
          <el-collapse
            v-model="activeNames"
            @change="handleChange"
         style="font-weight:550 !important;"
          >
            <el-collapse-item  title="课程名称 CourseTitle" name="1">
              <div style="margin-top: 5px;margin-left:20px;color: rgb(96, 214, 223);">名称: {{ trainInfo.courseTitle }}</div>
            </el-collapse-item>
            <el-collapse-item title="课程描述 CourseDescription" name="2">
              <div style="margin-top: 5px;margin-left:20px;color: rgb(96, 214, 223);">描述：{{ trainInfo.courseDescription }}</div>
            </el-collapse-item>
            <el-collapse-item title="课程类型 CourseRequired" name="3">
              <div style="margin-top: 5px;margin-left:20px;color: rgb(96, 214, 223);">类型：{{ trainInfo.courseRequired }}</div>
            </el-collapse-item>

            <el-collapse-item title="上传时间 CreatedTime" name="5">
               
              <div style="margin-top: 5px;margin-left:20px;color: rgb(96, 214, 223);">时间：{{ trainInfo.createdTime.replace( "T", " ") }}</div>
            </el-collapse-item>
            <el-collapse-item title="版权说明 CopyrightNotice" name="6">
              <div style="margin-top: 5px;margin-left:20px;color: rgb(96, 214, 223);">协议：Copyright © 2021 - 2022</div>
              <div style="color: rgb(96, 214, 223);">ETMS Corporation, All Rights Reserved</div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "vue-video-player/src/custom-theme.css";
import "video.js/dist/video-js.css";
import { openCourse } from "@/api/course";

export default {
  data() {
    return {
      activeNames: ["1"],
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        controls: true, //控制条
        preload: "auto", //视频预加载
        muted: false, //默认情况下将会消除任何音频。
        loop: false, //导致视频一结束就重新开始。
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4",
            src: "http://r4f66awjt.hn-bkt.clouddn.com/qv71MU307437.mp4", //你所放置的视频的地址，最好是放在服务器上
          },
        ],
        // poster: "http://39.106.117.192:8080/static/indexImg.png", //你的封面地址（覆盖在视频上面的图片）
        width: document.documentElement.clientWidth,
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
      },

      trainInfo: {
        courseTitle: "",
        courseDescription: "",
        courseRequired: "",

        courseLevel: "",
        createdBy: "",
        courseType: "",
        createdTime: "",
      },
      courseId: 11,
      courseInfo: {},
      tableData: [],
    };
  },

  created() {
    //从上一个界面获取课程id
    this.courseId = this.$route.query.courseId;
    this.getData();
  },
  methods: {
    getData() {
      openCourse(this.courseId).then((res) => {
        console.log(res);
        //播放第一个视频
        this.playerOptions["sources"][0]["src"] = res.data.courseAttachment;
        this.trainInfo.courseTitle = res.data.courseTitle;
        this.trainInfo.courseDescription = res.data.courseDescription;
        this.trainInfo.courseRequired = res.data.courseRequired;
        this.trainInfo.courseLevel = res.data.courseLevel;
        this.trainInfo.createdBy = res.data.createdBy;
        this.trainInfo.courseType = res.data.courseType;
        this.trainInfo.createdTime = res.data.createdTime;
      });
    },
    handleChange(val) {
      console.log(val);
    },
  },
};
</script>

<style scoped>
.trainDetails2 {
  width: 100%;
  height: calc(100vh - 50px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.container {
  width: 85%;
  height: 90%;
  display: flex;
}
.train-detalis-left {
  height: 100%;
  width: 800px;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.train-detalis-left-top {
  height: 10%;
  width: 100%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.train-detalis-left-bottom {
  display: flex;
  flex-direction: column;
  justify-content: center !important;
  height: 80%;
  width: 100%;
  background-color: rgb(0, 0, 0);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-top: 25px;
  border-radius: 4px;
}
.train-detalis-right {
  height: 100%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 300px;
  margin-left: 20px;
  margin-top: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.train-detalis-right-top {
  height: 10%;
  width: 100%;
  font-weight: 700;
  font-size: 16px;
  color: rgb(64, 158, 255);
  /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
}
.train-detalis-right-top > div:first-child {
  margin-top: 24px;
  margin-left: 20px;
}
.train-detalis-right-bottom {
  margin-top: 0px;
  width: 90%;
  margin-left: 10px;
  margin-right: 10px;
  text-indent: 20px;
}

.train-detalis-right-bottom-class {
  margin-left: 20px;
  margin-top: 20px;
  font-weight: 550;
  color: green;
}

.train-detalis-right-top > div:first-child {
  margin-top: 24px;
  margin-left: 20px;
}
</style>